<script setup>
    //引入模块
    import { ref,reactive} from 'vue'
    //准备购物车数据,设置成响应数据
    const carts = reactive([{name:'可乐',price:3,number:10}
    ,{name:'薯片',price:6,number:8}])

    function removeCart(index){
        carts.splice(index,1)
    }

    let getTotalPrice=()=>{
        let total = 0;
        for(let i = 0;i<carts.length;i++){
            total+=carts[i].number*carts[i].price
        }
        return total;
    }
    
</script>

<template>
    <div>
        <table>
            <thead>
                <tr>
                            <th>序号</th>
                            <th>商品名</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>操作</th>
                </tr>
            </thead>

            <tbody v-if="carts.length>0">
                <tr v-for="cart,index in carts" :key="index">
                    <td>{{ index +1 }}</td>
                    <td>{{cart.name }}</td>
                    <td>{{cart.price }}</td>
                    <td>{{cart.number }}</td>
                    <td>{{cart.price * cart.number }}</td>
                    <button @click="removeCart(index)">删除</button>
                </tr>
            </tbody>
            <tbody v-else>
                <td colspan="6">没有商品了</td>
            </tbody>

            
        </table>
        合计：{{ getTotalPrice() }}
    </div>
  
</template>

<style scoped>

</style>
